<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>姓名案例-插值语法实现</title>
</head>
<body>
<div id="app">
  <p>姓：<input type="text" v-model="lastName"></p>
  <p>名：<input type="text" v-model="firstName"></p>
<!--  这里对姓氏进行截取操作，从第一位开始到第三个为有效姓氏-->
  <p>全名：{{lastName.slice(0,3)}}+{{firstName}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        firstName:"三",
        lastName:"张1",
      }
    }
  })
</script>
</body>
</html>
